<style lang="less" rel="stylesheet/less" scoped>
.lable{
    .lable-p{
        font-size: 0.3rem;
        margin-left: 2.5vw;

    }
    .lable-list{
        li{
            width: 20vw;
            margin: 2.5vw;
            text-align: center;
            padding: 0.1rem 0.2rem;
            background-color: #bbbbbb;
            white-space:nowrap;
            p{
                position: relative;
                span{
                    font-size: 0.2rem;
                    position: absolute;
                    top: -0.23rem;
                    right: -0.3rem;
                    display:block;
                    width: 0.33rem;
                    height: 0.33rem;
                    color: #ffffff;
                    line-height: 0.3rem;
                    text-align: center;
                    border-radius:50%; 
                    background-color: #078301;
                }
            }
        }
    }
    .confirm{
        display: block;
        width: 70vw;
        background-color: #078301;
        font-size: 0.3rem;
        color: #ffffff;
        line-height: 0.6rem;
        border-radius: 3px;
        position: fixed;
        bottom: 0.8rem;
        left: 15vw;
    }
}
    
</style>
<template>
    <div class="lable">
        <p class="lable-p">我的标签</p>
        <ul class="box-wrap lable-list">
            <li v-for="(item,index) in myLable" :key="index">
                <p>{{item}}<span @click="changeLable('remove',item,index)">-</span></p>
            </li>
        </ul>
        <P class="lable-p">请添加您的标签，方便以后为您推选书籍</P>
        <ul class="box-wrap lable-list">
            <li v-for="(item,index) in allLable" :key="index">
                <p>{{item}}<span @click="changeLable('add',item,index)">+</span></p>
            </li>
        </ul>
    <button @click="pathTo()" class="confirm">确认</button>
    </div>
</template>

<script>
    export default {
        name: '',
        //数据
        data() {
            return {
                myLable:['科技','法律'],
                allLable:['教育','小说','文学','传记','艺术','绘本','文化','生活','儿童','百科','育儿',
                '军事','宗教/哲学'],


            }
        },
         //计算属性
        computed:{
           
        },
        //组件
        components: {},
        //初始化数据
        mounted() {
            
        },
        //方法
        methods: {
            pathTo(){
                this.$router.go(-1);
            },
            changeLable(ar,item,index){
                console.log(ar,item);
                if(ar=='add'){
                    this.myLable.push(item);
                    this.allLable.splice(index,1)
                }else if(ar=='remove'){
                    this.allLable.push(item);
                    this.myLable.splice(index,1)
                }
            }
        },
        //监听数据变化
        watch: {
          '$route' (to, from) {
          }
        }
    }
</script>
